<template>
	<view class="content">
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
				<view class="uni-list m-t5">
					<!-- 空白页 -->
					<empty v-if="tabItem.orderList.length === 0"></empty>
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in tabItem.orderList"  :key="index" >
						<view class="uni-media-list">
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-top">
									<text class="name">{{item.user.authName || item.user.realname || item.user.name}}</text>
									<text class="zt">{{typeName(tabItem)}}</text>
									{{item.content.title}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty"
	export default {
		components: {
			uniLoadMore,
			empty,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				pageSize: 10,
				loadingType: 'more', //加载更多状态
				userToExamine: [],
				empty: false,
				navList: [{
						classify: '全部订单',
						text: '全部订单',
						loadingType: 'more',
						list: [],
						type :1 ,
						currentPage: 0,
					},
					{
						classify: '未支付订单',
						text: '未支付订单',
						loadingType: 'more',
						list: [],
						type:2,
						currentPage: 0,
					},
					{
						classify: '已完成订单',
						text: '已完成订单',
						loadingType: 'more',
						list: [],
						type: 3,
						currentPage: 0,
					}
				]
			}
		},
		watch:{
			//显示空白页
			userToExamine(e){
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					this.empty = empty;
				}
			}
		},
		onLoad(options){
			this.tabCurrentIndex = 0;
			this.loadData()
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			this.loadData('add');
		},
		methods: {
			typeName(tabItem){
				if(tabItem.type == 1 || tabItem.type == 3){
					return '预约了';
				}else if(tabItem.type == 2){
					return '报名了';
				}else if(tabItem.type == 4){
					return '申请了';
				}
			},
			tabClick(index){
				this.tabCurrentIndex = index;
			},
			bindClick(t, id) {
				let url;
				if(t == 1){
					url = '/booking_record/verify';
				}else if(t == 2){
					url = '/train_record/verify';
				}else if(t == 3){
					url = '/ticketing_record/verify';
				}else if(t == 4){
					url  = '/volunteer/verify';
				}
				this.$api.adminGet(url,{ids: id, pass: true}).then(r=>{
					uni.showToast({
						title:"操作成功!",
						icon:"none"
					});
					this.loadData('refresh');
				}).catch(r=>{
					console.log(r);
				});
			},
			actionSheetTap(t, id) {
				let items = ['信息不完整', '报名人数已满', '多次重复报名', '活动被取消', '其他'];
				uni.showActionSheet({
					title:'请选择不通过原因',
					itemList: items,
					success: (e) => {
						var reason = items[e.tapIndex];
						let url;
						if(t == 1){
							url = '/booking_record/verify';
						}else if(t == 2){
							url = '/train_record/verify';
						}else if(t == 3){
							url = '/ticketing_record/verify';
						}else if(t == 4){
							url  = '/volunteer/verify';
						}
						this.$api.adminGet(url,{ids: id, pass: false, reason: reason}).then(r=>{
							uni.showToast({
								title:"操作成功!",
								icon:"none"
							});
							this.loadData('refresh');
						}).catch(r=>{
							console.log(r);
						});
						
					}
				})
			},
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			request(url, params, headers){
				return new Promise((resolve, reject) =>{
					uni.request({
						url: this.$api.globalData.baseUrl+'/api/admin'+url,
						data: params,
						header: headers,
						method: 'GET',
						success: (res) => {
							if(res.data.code == 200 || res.data.code == 201){
								resolve(res);
							}else if(res.data.code == 3){
								uni.showToast({
								    icon: 'none',
									position: 'bottom',
								    title: '登录超时，请重新登录',
								});
								setTimeout(function(){
									uni.navigateTo({  
										url: '/pages/user/login'  
									})
								},2000)
							}
						}
					})
				});
			},
			async loadData(type='add', loading, params = {}) {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let classify = navItem.classify;
				let t = navItem['type'];
				//没有更多直接返回
				if(type == 'refresh'){
					navItem.loadingType = 'more'
					navItem.currentPage = 0;
					navItem.list = [];
				}else{
					if(navItem.loadingType === 'nomore'){
						uni.hideLoading();
						return;
					}
					navItem.loadingType = 'loading';	
				}
				
				let url ;
				if(t == 1){
					url = '/booking_record/list';
				}else if(t == 2){
					url = '/train_record/list';
				}else if(t == 3){
					url = '/ticketing_record/list';
				}else if(t == 4){
					url  = '/volunteer/list';
				}
				this.$api.adminGet(url,{pageSize: this.pageSize, pageNo: navItem.currentPage, status: 0}).then(r=>{
					let list= r.body;
					if(list.length != 0){
						navItem.currentPage = navItem.currentPage + 1;
						navItem.list = navItem.list.concat(list);
					}
					if(list.length < this.pageSize){//没有其他数据了
						navItem.loadingType = 'nomore';
						uni.stopPullDownRefresh();//没有跟多数据了
					}
					uni.hideLoading();
				})
				
			},
			//详情
			navToDetailPage(item,url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style lang="scss">
	.uni-media-list-body{ height: auto;}
	.uni-media-list-logo{ width: 100upx;height: 100upx;}
	.uni-media-list-logo image{ border-radius: 50%;}
	.uni-media-list-text-top{font-size: 26upx;}
	.uni-media-list-text-top .name{ color: #379be9;}
	.uni-media-list-text-top .zt{ color: #666; padding: 0 10upx;}
	.uni-media-list-text-bottom{ padding-bottom: 10upx;}
	.uni-media-list-text-bottom .btn{float: right;background: #b92121; border-radius: 5upx;color: #fff;padding: 10upx 20upx;border:#b92121 solid 1px;}
	.uni-media-list-text-bottom .btn1{float: right;background: #fff;border:#ddd solid 1px; border-radius: 5upx;color: #b92121;padding: 10upx 20upx;margin-right: 16upx;}
	page, .content{
		background: #fff;
		height: 100%;padding-bottom: 100upx;
	}
	
	.swiper-box{
		height: calc(100% - 40px);
	}
	.list-scroll-content{
		height: 100%;
	}
	
	.navbar{
		display: flex;
		height: 40px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #000;
			position: relative;
			&.current{
				color: #b92121;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 2px solid #b92121;
				}
			}
		}
	}
	.uni-swiper-item{
		height: auto;
	}
	
	
	.page-bottom{
		position:fixed;
		left: 0upx;
		bottom:0upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90upx;
		line-height: 86upx;
		background:#fff;
		box-shadow: 0 0 10upx 0 rgba(0,0,0,.2);
		font-size: 32upx;
		color: #333;
		}
		.page-bottom .iconfont{font-size:42upx;padding-right: 10upx;}
</style>	
